import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
import { AtInput, AtIcon } from 'taro-ui'
import ShopItem from "../../components/shop-item/shop-item";

import { get, post } from "../../api/fetch"
import './shopdetail.scss'

class WebNews extends Component {
  constructor(props) {
    super(props)
    this.state = {
      info: new Object(),
      trueHeight: 375,
      recomendList: '',
    }
  }
  componentWillMount() {
    this.getDetail();
    this.getRecomendList();
  }
  componentDidMount() {
  }
  config = {
    navigationBarTitleText:'商品详情'
  }
  getDetail() {
    get('https://api-test.tbk.rockysaas.com/tbk/goods/getDetails', {goodsId: this.$router.params.goodsId}).then((response) => {
      let res = response.data
      if(res.code === 1){
        let { data } = res;
        this.setState({
          info: data,
        })
      }
    })
  }
  getRecomendList() {
    get('https://api-test.tbk.rockysaas.com/tbk/goods/like', {goodsId: this.$router.params.goodsId}).then((response) => {
      let res = response.data
      if(res.code === 1){
        let recomendList = res.data;
        this.setState({
          recomendList,
        })
      }
    })
  }
  handleDetail(itemid) {
    // console.log(itemid)
    let url = `https://detail.m.tmall.com/item.htm?id=${itemid}`
    url = encodeURIComponent(url)

    console.log(url)
    Taro.navigateTo({
      url: `/pages/webdetail/webdetail?url=${url}&type=1`
    })
  }
  handleCoupon(couponurl) {
    console.log(couponurl)
    let url = encodeURIComponent(couponurl)
    Taro.navigateTo({
      url: `/pages/webdetail/webdetail?url=${url}&type=1`
    })
  }
  render() {
    const {itemprice, itemendprice, itempic, itemtitle, itemsale, itemdesc, couponmoney, itemid, couponurl} = this.state.info
    const {trueHeight, recomendList} = this.state
    let images = []
    if(itempic) {
      images = itempic.split(';')
    }
    const swiperStyle = { height: trueHeight+'px' }
    const scrollStyle = {height:Taro.getSystemInfoSync().windowHeight+'px'}
    
    return (
      <View className='detail-wrap'>
        <ScrollView 
          className='content scrollview'
          scrollY
          scrollWithAnimation
          style={scrollStyle}
        >
        <View className="detail-content">
          <Swiper
            style={swiperStyle}
            circular
          >
            {
              images.map((item, index) => {
                return (
                  <SwiperItem key={index}>
                    <View className='swiper-item'>
                      <Image
                        style='width: 100%;height: 100%;background: #fff;'
                        src={item}
                        mode='widthFix'
                        lazyLoad
                      />
                    </View>
                  </SwiperItem>
                )
              })
            }
          </Swiper>
          <View className='info border-bottom'>
            <View className='product-price'>
              <Text className='coupon-price'>{itemendprice}</Text>
              <Text>（券后价格）</Text>
            </View>
            <View class='product-title'>
              <Text className='title'>{itemtitle}</Text>
              {/* <View className='share-btn'>分享</View> */}
            </View>
            <View className='others'>
              <View className='text'>原价：{itemprice}</View>
              <View className='text'>券金额：{couponmoney}</View>
              <View className='text'>月销：{itemsale}</View>
            </View>
          </View>
          <View className='info border-bottom'>
            <View className='product-desc'>
              <View className='desc-title'>商品简介</View>
              <Text className='desc-text'>{itemdesc}</Text>
            </View>
          </View>
          <View className='info'>
            <View className='product-desc'>
              <View className='desc-title'>优惠券使用规则</View>
              <Text className='desc-text'>点击立即领券按钮会跳转到淘宝官方领券页面进行领券</Text>
            </View>
          </View>
          <View className='recomend'>
            <View className='recomend-title'>
              <Image
                style='width: 100%;height: 100%;background: #fff;'
                src='https://test.tbk.mobile.mhh.rockysaas.com/img/like.c36dcfcd.jpg'
                mode='widthFix'
                lazyLoad
              />
            </View>
            <View className='products-wrap'>
              {recomendList && recomendList.map((item)=>{
                return  <View key={item.itemid} className='product'>
                  <ShopItem
                    itemid={item.itemid}
                    title={item.itemtitle}
                    sale={item.itemsale}
                    price={item.itemendprice}
                    delPrice={item.itemprice}
                    imgsrc={item.itempic}                  
                  />
                </View>
              })}
            </View>
          </View>
          {/* <View className='operation'>
            <View className='detail-btn btn' onClick={this.handleDetail.bind(this, itemid)}>
              <Text className='btn-text'>查看商品详情</Text>
            </View>
            <View className='coupon-btn btn' onClick={this.handleCoupon.bind(this, couponurl)}>
              <Text className='btn-text'>立即领券</Text>
            </View>
          </View> */}
        </View>
        </ScrollView>
      </View>
    )
  }
}

export default WebNews
